<template>
  <view class="page">
    <scroll-view class="m-scrollBox" scroll-y="true">
      <block v-if="(voucherList.length>0)">
        <view class="m-coupon-item" @click="onSelectVoucher" :data-id="(item.user_voucher_id)"
              :data-item_id="(item.item_id)" v-for="(item, index) in voucherList" :key="index">
          <image lazy-load src="https://static.shopsuite.cn/xcxfile/appicon/images/coupon_red.png"
                 class="item-bg"></image>
          <view class="coupon-item-left">
            <view class="item-left-top">{{ __('￥') }}<label style="font-size:64rpx">{{ item.voucher_price }}</label>
            </view>
            <view class="item-left-bottom">{{ sprintf(__('满(%s)可用'), item.voucher_subtotal) }}</view>
          </view>
          <view class="coupon-item-right">
            <view class="item-title item-title-black">{{ item.activity_name }}</view>
            <view class="item-middle">{{ sprintf(__('满 %s 减 %s'), item.voucher_subtotal, item.voucher_price) }}</view>
            <view class="item-middle">
              <label class="item-time">{{ $.formatDateFormatter(item.voucher_start_date, "yy-MM-dd") }} {{ __('至') }}
                {{ $.formatDateFormatter(item.voucher_end_date, "yy-MM-dd") }}</label>
            </view>

            <view class="item-desc"></view>
          </view>
          <image lazy-load src="/static/images/checked.png" class="image-checked"
                 v-if="(item.user_voucher_id == idChecked)"/>
        </view>

        <button class="u-btn u-btn-default" style="margin-top:30rpx;" @click="uesNothing">{{ __('不使用优惠券') }}</button>
      </block>
      <view class="m-nullcontent" v-else>
        <view class="m-nullpage-middle">
          <label class="iconfont icon-meiyougengduo"></label>
          <view class="m-null-tip">
            <text>{{ __('亲~什么都没有') }}</text>
            <text>{{ __('赶快去领券中心吧') }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import $ from "../../helpers/util";
import {mapMutations, mapState} from 'vuex'

export default {
  data() {
    return {
      options: {},
      voucherList: [],
      idChecked: 0,
    };
  },
  computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__('使用优惠券')
    });
    options.val = decodeURIComponent(options.val)
    var voucher_items = $.parseJSON(options.val);
    this.setData({
      voucherList: voucher_items,
      idChecked: options.user_voucher_id,
      options: options,
    })
  },
  methods: {
    ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
    onSelectVoucher: function (e) {
      var that = this;
      var item_id = parseInt(e.currentTarget.dataset.item_id);

      this.setData({
        idChecked: parseInt(e.currentTarget.dataset.id)
      });
      this.goback();

      return;
    },
    uesNothing: function () {
      var that = this;

      this.setData({
        idChecked: 0
      });

      this.goback();
    },
    goback: function () {
      var that = this;
      $.navigateBack(1, function () {
        var params = that.options;

        params.user_voucher_id = that.idChecked;
        that.notice.postNotificationName("RefreshCoupon", params)
      })
    }
  }
}
</script>


<style lang="scss">
@import "../../styles/_variables";

.m-scrollBox {
  padding: 10rpx 10rpx 0rpx;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.m-coupon-item {
  margin: 10rpx 10rpx 20rpx;
  position: relative;
  width: 100%;
  height: 190rpx;
}

.m-coupon-item .item-bg {
  width: 710rpx;
  height: 190rpx;
  position: absolute;
  left: 0;
  top: 0;
}

.coupon-item-left {
  position: absolute;
  color: white;
  text-align: center;
  width: 250rpx;
  padding: 25rpx 0rpx;
}

.item-left-top {
  line-height: 100rpx;
  font-weight: bold;
}

.item-left-top label {
  font-size: 90rpx;
}

.item-left-bottom {
  font-size: 24rpx;
}

.coupon-item-right {
  position: absolute;
  left: 250rpx;
  top: 0;
  width: 420rpx;
  height: 170rpx;
  padding: 10rpx 20rpx;
  font-size: 22rpx;
  color: gray;
}

.item-title {
  line-height: 40rpx;
  font-size: 28rpx;
  height: 80rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item-title-black {
  color: #333;
}

.item-middle {
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
}

.item-usenow {
  font-size: 24rpx;
  border: 1px solid $default-skin-bg;
  float: right;
  color: $default-skin-bg;
  border-radius: 40rpx;
  padding: 0 15rpx;
  position: relative;
  top: -8rpx;
  line-height: 40rpx;
}

.item-desc {
  height: 50rpx;
  line-height: 50rpx;
  margin-top: 5rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.image-checked {
  position: absolute;
  right: 20rpx;
  bottom: 0;
  width: 50rpx;
  height: 50rpx;
}
</style>
